<template>
  <div class="login-wrapper">
    <el-card :body-style="{ width: '100%', display: 'flex',height: '100%', padding: 0 }">
      <common-canvas class="canvas"></common-canvas>
      <div class="login-wrap">
        <div class="title">
          <div class="title-name">{{ statusText.title[status] }}</div>
          <el-link @click="topStatus">{{ statusText.top[status] }}</el-link>
        </div>
        <al-form ref="alform" :model="model" :rules="loginRules" :form-item="items" class="al-form" @submit="submit">
          <template #code="i">
            <div class="code-wrapper">
              <el-input
                v-model="model[i.row.model]"
                placeholder="请输入验证码"
                clearable
              ></el-input>
              <el-button :key="i.name" :disabled="disabled" @click="sendCode">{{ codeText }}</el-button>
            </div>
          </template>
          <template #operate="i">
            <div class="operate">
              <el-checkbox
                :key="i.name"
                v-model="model[i.row.model]"
              >记住我</el-checkbox>
              <el-link class="way" @click="verLogin">{{
                statusText.middle[loginStatus]
              }}</el-link>
            </div>
          </template>
          <el-button type="primary" @click="loginMethod">{{
            statusText.button[status]
          }}</el-button>
        </al-form>
        <div class="password">
          <el-link @click="status = 2">已有账号, 忘记密码?</el-link>
        </div>
        <div class="other">
          <el-divider>其它操作</el-divider>
          <div class="icons">
            <!-- <i class="iconfont icweixin1"></i> -->
            <el-link>联系作者</el-link>
            <el-link>评论本站</el-link>
            <el-link>友情链接</el-link>
            <el-link>申请管理</el-link>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapActions } from 'vuex'
export default Vue.extend({
  data() {
    return {
      codeText: '发送验证码',
      statusText: {
        title: ['登录', '注册', '修改密码'],
        top: ['没有账号? 点此注册', '已有账号? 忘记密码', '记得密码? 切换登录'],
        middle: ['短信验证登录', '密码登录', ''],
        button: ['登录', '注册', '修改']
      },
      status: 0,
      loginStatus: 0,
      loginRules: {
        account: [
          {
            pattern: /^1\d{10}$|^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
            message: '格式错误',
            trigger: 'change'
          },
          { required: true, message: '请输入手机或者邮箱', trigger: 'change' }
        ],
        password: [
          { min: 6, message: '密码不低于6位数', trigger: 'change' },
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        code: [
          { min: 4, max: 4, message: '验证码为4位数值', trigger: 'change' },
          { required: true, message: '请输入验证码', trigger: 'change' }
        ],
        operate: [
          { required: true, message: '请选择记住我', trigger: 'change' }
        ]
      },
      model: {
        account: '18680160654',
        password: '123456',
        code: '',
        operate: true
      }
    }
  },
  computed: {
    disabled() {
      const pattern = /^1\d{10}$|^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      const { account } = this.model
      if (this.codeText === '发送验证码' && pattern.test(account)) {
        return false
      } else {
        return true
      }
    },
    items() {
      const item: any = this.initItem()
      const status = this.status
      const loginStatus = this.loginStatus
      switch (status) {
      case 0:
        if (loginStatus === 1) {
          item.splice(1, 1)
        } else if (loginStatus === 0) {
          item.splice(2, 1)
        }
        break
      case 1:
        item.splice(3, 1)
        break
      case 2:
        item.splice(3, 1)
        break
      }
      return item
    }
  },
  watch: {
    status() {
      const status = this.status
      if (status !== 0) {
        this.model.password = ''
        this.model.code = ''
      }
    }
  },
  methods: {
    initItem() {
      return [
        {
          placeholder: '手机 / 邮箱',
          item: 'input',
          model: 'account',
          clearable: true
        },
        {
          placeholder: '请输入密码',
          item: 'input',
          model: 'password',
          showPassword: true,
          clearable: true
        },
        {
          item: 'slot',
          name: 'code',
          model: 'code'
        },
        {
          item: 'slot',
          name: 'operate',
          model: 'operate'
        }
      ]
    },
    topStatus() {
      if (this.status === 0) {
        this.status = 1
      } else if (this.status === 1) {
        this.status = 2
      } else {
        this.status = 0
      }
    },
    verLogin() {
      this.loginStatus === 0 ? (this.loginStatus = 1) : (this.loginStatus = 0)
    },
    loginMethod() {
      const ref: any = this.$refs.alform
      ref.submit('alForm')
    },
    submit() {
      const status = this.status
      const axios:any = this.$axios
      switch (status) {
      case 1:
        axios.login.post(this.model).then((res:any) => {
          console.log(res)
        })
        break
      }
    },
    sendCode() {
      const { code }:any = this.$axios
      this.codeText = '60'
      const time = setInterval(() => {
        if (this.codeText === '0') {
          this.codeText = '发送验证码'
          clearInterval(time)
        } else {
          this.codeText = (parseInt(this.codeText) - 1) + ''
        }
      }, 1000)
      code.post({ account: this.model.account }).then((res:any) => {
        console.log(res)
      }).catch(() => {
        this.codeText = '发送验证码'
      })
    },
    ...mapActions('index', ['LoginMethod'])
  }
})
</script>

<style scoped lang="scss">
.login-wrapper {
  width: 100%;
  height: calc(100vh - var(--tmHeight));
  display: flex;
  justify-content: center;
  padding-top: 100px;
  &:before {
    width: 487px;
    height: 412px;
    background-image: url('static/login-left-bottom.png');
    left: 0;
    content: '';
    position: fixed;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
  }
  &:after {
    width: 487px;
    height: 412px;
    background-image: url('static/login-right-bottom.png');
    right: 0;
    content: '';
    position: fixed;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .el-card {
    z-index: 100;
    width: 1000px;
    height: 600px;
    .canvas {
      flex: 0 0 50%;
    }
    .login-wrap {
      height: 100%;
      flex: 1;
      padding: 40px 30px;
      .title {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .title-name {
          font-weight: 700;
          font-size: 21px;
        }
      }
      .al-form {
        width: 100%;
        ::v-deep .el-button-group {
          width: 100%;
        }
        .el-button {
          width: 100%;
        }
      }
      .operate {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-link {
          line-height: 20px;
        }
      }
      .way {
        cursor: pointer;
      }
      .password {
        text-align: center;
      }
      .other {
        margin-top: 30px;
        overflow: hidden;
        .icons {
          display: flex;
          justify-content: space-between;
          // .iconfont {
          //   font-size: 32px;
          //   color: var(--tmColor);
          //   cursor: pointer;
          // }
        }
      }
    }
    .code-wrapper {
      width: 100%;
      display: flex;
      .el-input {
        flex: 1;
        margin-right: 20px;
      }
      .el-button {
        flex: 0 0 80px;
      }
      // .code{
      //   &:after{
      //     content: '请输入验证码';
      //     color: red
      //   }
      // }
    }
  }
}
</style>
